import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart' ;
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:mfkb/config/Config.dart';
import 'package:mfkb/pages/modules/CustomRoute.dart';
import 'package:mfkb/pages/school/AroundPage.dart';
import 'package:mfkb/pages/school/market/GoodsDetail.dart';
import 'package:mfkb/plugin/MyBehavior.dart';
import 'package:mfkb/service/MarketService.dart';
import 'package:toast/toast.dart';

class MarketTab extends StatefulWidget {
  List<dynamic> data ;
  MarketTab({Key key , @required this.data}):super(key : key) ;
  @override
  _MarketTabState createState() => _MarketTabState();
}

class _MarketTabState extends State<MarketTab> {
  int _current = 0 ;
  List<dynamic> _list = [] ;

  @override
  void initState() {
    super.initState();
    for(var i = 0 ; i < widget.data.length ; i++){
      _list.add(MarketGoods(id: widget.data[i]["tid"],)) ;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: ScreenUtil().setHeight(48) ,
          margin: EdgeInsets.only(top:ScreenUtil().setHeight(3)),
          child: ListView(
            scrollDirection: Axis.horizontal ,
            children: List.generate(widget.data.length, (index){
              return GestureDetector(
                child:Container(
                  // color: index % 2 == 0 ? Colors.red : Colors.green,
                  width: ScreenUtil().setWidth(73) ,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start ,
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top:ScreenUtil().setHeight(index == _current ? 13 : 14)) ,
                        height:ScreenUtil().setHeight(index == _current ? 22 : 20) ,
                        // color: Colors.red ,
                        child: Text(widget.data[index]["name"] , style: TextStyle(
                          fontSize: ScreenUtil().setSp(index == _current ? 16 : 14) ,
                          fontWeight: FontWeight.bold ,
                          height: ScreenUtil().setHeight(index == _current ? 22 : 20) / ScreenUtil().setSp(index == _current ? 16 : 14) ,
                          color: index == _current ? Color.fromARGB(255, 19, 28, 53) : Color.fromARGB(255, 78, 86, 108)
                        ),overflow: TextOverflow.ellipsis,) ,
                      ) ,
                      Visibility(
                        visible: index == _current ,
                        child: Container(
                          width: ScreenUtil().setWidth(24),
                          height: ScreenUtil().setHeight(3),
                          decoration: BoxDecoration(
                            color: Color.fromARGB(255, 0, 195, 206) ,
                            borderRadius: BorderRadius.all(Radius.circular(8))
                          ),
                          margin: EdgeInsets.only(top:ScreenUtil().setHeight(9)),
                        ),
                      )
                    ],
                  ),
                ) ,
                onTap: (){
                  _current = index ;
                  setState(() {});
                },
              ) ;
            }),
          ) ,
        ),
        Expanded(
          child: getWidget() ,
        )
      ],
    );
  }

  getWidget(){
    if(_list.length == 0){
      return Container() ;
    }
    return Stack(
      children: List.generate(_list.length, (index){
        return Visibility(
          visible: _current == index ,
          child: _list[_current],
        ) ;
      }),
    )  ;
  }
}

class MarketGoods extends StatefulWidget {
  int id ;
  MarketGoods({Key key , @required this.id}):super(key:key) ;
  @override
  _MarketGoodsState createState() => _MarketGoodsState();
}

class _MarketGoodsState extends State<MarketGoods> {
  List<dynamic> _list = [] ; 
  @override
  void initState() {
    super.initState();
    MarketService().goods(widget.id).then((value){
      if(value["code"] == 200){
        _list = value["data"] ;
        setState(() { });
      }else{
        Toast.show(value["msg"], context) ;
      }
    }) ;
  }
  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: MyBehavior() ,
      child:ListView(
        padding: EdgeInsets.all(0),
        children:<Widget>[
          Container(
            margin: EdgeInsets.only(left:ScreenUtil().setWidth(13) , right:ScreenUtil().setWidth(12) , top:ScreenUtil().setHeight(11) , bottom:ScreenUtil().setHeight(11)),
            child: Wrap(
              runSpacing: ScreenUtil().setHeight(10),
              spacing: ScreenUtil().setWidth(8),
              children: List.generate(_list.length, (index){
                return Container(
                  width: ScreenUtil().setWidth(170.7),
                  height: ScreenUtil().setWidth(170)+ScreenUtil().setHeight(82),
                  decoration: BoxDecoration(
                    color: Colors.white ,
                    borderRadius: BorderRadius.all(Radius.circular(12))
                  ),
                  child: GestureDetector(
                    child: Column(
                      children: <Widget>[
                        Container(
                          height: ScreenUtil().setWidth(170),
                          width: ScreenUtil().setWidth(170.7),
                          child: ClipRRect(
                            borderRadius: BorderRadius.only(topLeft: Radius.circular(12) , topRight: Radius.circular(12)),
                            child: CachedNetworkImage(
                              imageUrl: Config().getImgHost()+_list[index]["icon"],
                              placeholder: (contex , url){
                                return Container(
                                  color:Color.fromARGB(255, 246, 245, 248) ,
                                  child: Center(
                                    child: Image.asset("assets/images/imageloading.png"),
                                  ) ,
                                ) ;
                              }
                            ),
                          ),
                        ) ,
                        Container(
                          height: ScreenUtil().setHeight(32),
                          width: ScreenUtil().setWidth(152),
                          margin: EdgeInsets.only(left:ScreenUtil().setWidth(9) , right:ScreenUtil().setWidth(10) , top:ScreenUtil().setHeight(5)),
                          child: Text(_list[index]["gname"] , style: TextStyle(
                            fontSize: ScreenUtil().setSp(13) ,
                            height: ScreenUtil().setHeight(16) / ScreenUtil().setSp(13) ,
                            color: Color.fromARGB(255, 19, 27, 54) ,
                            fontWeight: FontWeight.bold 
                          ),overflow: TextOverflow.ellipsis,maxLines: 2,),
                        ) ,
                        Container(
                          height: ScreenUtil().setHeight(24),
                          margin: EdgeInsets.fromLTRB(ScreenUtil().setWidth(9), ScreenUtil().setHeight(13), ScreenUtil().setWidth(10), 0),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.end ,
                            children: <Widget>[
                              Expanded(
                                child: Container(
                                  child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.end ,
                                    children: <Widget>[
                                      Text(
                                        "￥" , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          fontSize: ScreenUtil().setSp(10) ,
                                          color: Color.fromARGB(255, 19, 27, 54)
                                        ),
                                      ) ,
                                      Text(
                                        _list[index]["price"].toString() , style: TextStyle(
                                          fontSize: ScreenUtil().setSp(18) ,
                                          fontWeight: FontWeight.bold ,
                                          color: Color.fromARGB(255, 19, 27, 54) ,
                                          height: ScreenUtil().setHeight(18) / ScreenUtil().setSp(18)
                                        ),
                                      ) 
                                    ],
                                  ),
                                ),
                              ) ,
                              // GestureDetector(
                              //   child: Container(
                              //     width: ScreenUtil().setHeight(24),
                              //     height: ScreenUtil().setHeight(24),
                              //     child: Image.asset("assets/images/gwc2.png" , fit: BoxFit.fill,),
                              //   ),
                              //   onTap: (){
                              //     MarketService().addGoodsToCart(_list[index]["gid"]).then((value){
                              //       if(value["code"] == 200){
                              //         Toast.show("添加成功", context) ;
                              //       }else {
                              //         Toast.show(value["msg"], context) ;
                              //       }
                              //     }) ;
                              //   },
                              // )
                            ],
                          ) ,
                        )
                      ],
                    ),
                    onTap: (){
                      Navigator.of(context).push(CustomRoute(GoodsDetail(id: _list[index]["gid"],))) ;
                    },
                  ),
                ) ;
              }),
            ),
          ) ,
        ]
      ) ,
    );
  }
}